<template>
  <div class="body">
    <section class="policy-banner">
      <div class="index-bannerMain clearfix center-block">
        <div class="index-title pull-left">
          <h2>政策法规</h2>
        </div>
      </div>
    </section>

    <section class="organ_screen">
      <div class="center-block">
        <div id="QuaT1" class="QuaT center-block">
          <h3 class="circular-title"></h3>
          <div id="QuaTle1" class="QuaTle Q_left">
            <span
              :class="{active:index==ids}"
              @click="typeTab(index)"
              v-for="(item,index) in typeList"
              :key="index"
            >{{item}}</span>
          </div>
        </div>

        <div id="QuaBoy1" class="MainTable moveTable QuaBoy">
          <section :class="ids==0?'active':''">
            <table
              class="table m_c_table policy_table"
              width="100%"
              cellpadding="0"
              cellspacing="0"
            >
              <tr>
                <td>南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</td>
                <td>2019-05-02</td>
              </tr>
              <tr>
                <td>南昌市科学技术局关于印发《南昌市建设工程抗震设防事中事后监管办法（暂行）》的通知</td>
                <td>2019-05-02</td>
              </tr>
              <tr>
                <td>南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</td>
                <td>2019-05-02</td>
              </tr>
              <tr>
                <td>南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</td>
                <td>2019-05-02</td>
              </tr>
              <tr>
                <td>南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</td>
                <td>2019-05-02</td>
              </tr>
              <tr>
                <td>南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</td>
                <td>2019-05-02</td>
              </tr>
              <tr>
                <td>南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</td>
                <td>2019-05-02</td>
              </tr>
              <tr>
                <td>南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</td>
                <td>2019-05-02</td>
              </tr>
              <tr>
                <td>南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</td>
                <td>2019-05-02</td>
              </tr>
              <tr>
                <td>南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</td>
                <td>2019-05-02</td>
              </tr>
              <tr>
                <td>南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</td>
                <td>2019-05-02</td>
              </tr>
              <tr>
                <td>南昌市建设项目生成管理办法（试行）》《南昌市“多规合一”业务协同平台运行规则（试行）》的通知</td>
                <td>2019-05-02</td>
              </tr>
            </table>
            <!-- 分页 -->
            <div>
              <div class="fenYe clearfix">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="tableQuery.page"
                  :page-sizes="[10, 15, 20, 25]"
                  :page-size="tableQuery.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                ></el-pagination>
              </div>
            </div>
          </section>
          <section :class="ids==1?'active':''">第2栏内容</section>
          <section :class="ids==2?'active':''">第3栏内容</section>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  name: "policyList",
  data: function() {
    return {
      ids: 0,
      typeList: ["法律法规", "规章制度", "管理办法"],
      // 表格数据
      tableList: [],
      tableQuery: {
        // 当前的页数
        page: 1,
        // 当前显示多少条
        pageSize: 2
      },
      total: 0
    };
  },
  methods: {
    typeTab(id) {
      this.ids = id;
    },
    // 右边每页多少条数据
    handleSizeChange(newSize) {
      this.tableQuery.page = newSize;
      // console.log( this.tableQuery.page);
    },
    // 左边栏第几页的数据
    handleCurrentChange(newPage) {
      // this.tableQuery.pageSize=newPage
      // console.log( newPage);
    }
  }
};
</script>

<style scode>
@import "../../../assets/css/agency.css";
</style>
